<template>
  <el-dialog v-model="dialogShow" @close="cancel" title="经纬度选择" append-to-body>
    <div>当前经纬度：{{ lngLat }}</div>
    <div class="map" id="container"></div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { Scene, RasterLayer, Marker, MarkerLayer, Scale, Zoom } from '@antv/l7'
import { Map } from '@antv/l7-maps'
import { ElMessage } from 'element-plus'

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  lonLat: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:dialogVisible', 'updateLngLat', 'closeDialog'])
const dialogShow = computed({
  get: () => props.dialogVisible,
  set: (val) => {
    emit('update:dialogVisible', val)
  }
})

watch(dialogShow, (val) => {
  if (val) {
    lngLat.value = props.lonLat
    nextTick(() => {
      initMap()
    })
  }
})

const scene = ref(null)
const markerLayer = ref(null)
const lngLat = ref('')

const initMap = () => {
  scene.value = new Scene({
    id: 'container',
    logoVisible: false,
    map: new Map({
      zoom: 13,
      minZoom: 4,
      maxZoom: 18,
      pitch: 0,
      center: lngLat.value ? lngLat.value.split(',') : ['120.43325056066504', '36.183868828044005'],
      logoVisible: false
    })
  })

  const layer = new RasterLayer({ zIndex: 1, name: 'baseLayer' })
  const annotionLayer = new RasterLayer({
    zIndex: 2,
    name: 'annotionLayer'
  })

  layer.source('https://t1.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=85c9d12d5d691d168ba5cb6ecaa749eb', {
    parser: {
      type: 'rasterTile',
      tileSize: 256,
      format: async (data) => {
        console.log(data)
      }
    }
  })
  annotionLayer.source('https://t1.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=85c9d12d5d691d168ba5cb6ecaa749eb', {
    parser: {
      type: 'rasterTile',
      tileSize: 256
    }
  })

  scene.value.on('loaded', () => {
    scene.value.addLayer(layer)
    scene.value.addLayer(annotionLayer)

    const scale = new Scale({
      zoomInTitle: '放大',
      zoomOutTitle: '缩小'
    })
    scene.value.addControl(scale)

    const zoom = new Zoom({
      zoomInTitle: '放大',
      zoomOutTitle: '缩小'
    })
    scene.value.addControl(zoom)
    if (lngLat.value) {
      createMarkerLayer(lngLat.value.split(','))
    }
  })

  scene.value.on('click', (ev) => {
    console.log('markerLayer.value', markerLayer.value)
    if (markerLayer.value) {
      scene.value.removeMarkerLayer(markerLayer.value)
    }
    createMarkerLayer([ev.lngLat.lng, ev.lngLat.lat])
    lngLat.value = `${ev.lngLat.lng},${ev.lngLat.lat}`
  })
}

const createMarkerLayer = (lngLatArr) => {
  const marker = new Marker().setLnglat(lngLatArr)
  markerLayer.value = new MarkerLayer({ zIndex: 100 })
  markerLayer.value.addMarker(marker)
  scene.value.addMarkerLayer(markerLayer.value)
}

const submitForm = () => {
  if (!lngLat.value) {
    ElMessage({ type: 'warning', message: '您没有选择位置' })
  } else {
    emit('updateLngLat', lngLat.value)
  }
  cancel()
}

const cancel = () => {
  markerLayer.value && scene.value.removeMarkerLayer(markerLayer.value)
  emit('closeDialog')
}
</script>

<style>
.map {
  width: 100%;
  height: 500px;
}
</style>
